<template>
    <div class="com-cnt">
        <i-swiper :items="data.imagesList">
            <template slot-scope="data">
                <span class="swiper-img" :style="{backgroundImage:'url('+data.src+')'}"></span>
            </template>
        </i-swiper>
        <h2 class="title">{{data.title}}</h2>
        <p class="price">市场价{{data.price}}</p>
        <p class="num1">会员价：{{data.vipprice}}</p>
        <cnt-com>
            <ul class="tab-cnt">
                <li v-for="(item, index) in arrInfo" :key="index" @click="changeCom(index)" class="item" :class="index%2 == 0 ? 'border-right' : ''">
                    <span :class="iNow == index ? 'cur' : ''" class="txt">{{item}}</span>
                </li>
            </ul>
        </cnt-com>
        <fade-animation :fadename="fadename">
            <component :data="comItemData" :is="currentTabComponent"></component>
        </fade-animation>
        <div @click="applyDo" class="btn-fix">立即报名</div>
        <div class="mask" :class="{hidemask:hidemaskFlag}">
            <div class="tourbg">
                <img src="../../assets/imgs/indeximg/tourbg.png" alt="">
            </div>
            <ul class="submitorexit">
                <li @click="toSubmitTour">确定</li>
                <li @click="closeMask">取消</li>
            </ul>
        </div>
        <!-- 支付密码 -->
        <div class="openups " v-if="isBshow=='true'">
            <div class="tanceng">
                <div class="hide" @click="isBshow='false'">
                    <img src="../../assets/imgs/order/back.png" alt="" width="100%" height="100%">
                </div>
                <div class="shuom">
                    <span>请输入支付密码</span>
                </div>
                <div class="word">
                    <p class="top">
                        <input type="password" v-model="postPass.payPassword" placeholder="请输入支付密码">
                    </p>
                    <p class="wang" @click="direct('forgetPass')">忘记密码?</p>
                    <p class="rule">
                        <span @click="getPassword">确认</span>
                    </p>
                </div>
            </div>
            <!-- <div class="sss"></div> -->
        </div>
        <!-- 支付密码 -->
        <!-- 提示弹层 -->
        <div class="openup " v-if="isAshow=='true'">
            <div class="tanceng">
                <div class="hide" @click="isAshow='false'">
                    <img src="../../assets/imgs/order/erro.png" alt="" width="100%" height="100%">
                </div>
                <div class="word">
                    <p class="top">
                        <input type="checkbox" id="risk-use">将登陆密码作为支付密码
                    </p>
                    <p class="rule">
                        <span @click="direct('setPassword')">设置</span>
                        <span @click="getPaymentset">确认</span>
                    </p>
                </div>
            </div>
            <div class="sss"></div>
        </div>
        <!-- 提示弹层 -->
    </div>
</template>

<script>
import ISwiper from '@/common/swiper/swiper.vue'
import CntCom from '@/common/cnt/Cnt.vue'
import axios from 'axios'
import Qs from 'qs'
import { maskTips, maskCallback } from '@/assets/js/dom'
import BComponent from './component/tips'
import AComponent from './component/detail'
import FadeAnimation from '@/common/fade/FadeAnimation.vue'
import { domain } from '@/assets/js/config'
import http from "@/assets/js/axios"
export default {
    name: "travelDetailpage",
    components: {
        ISwiper,
        CntCom,
        FadeAnimation
    },
    data() {
        return {
            isAshow: 'false',
            isBshow: 'false',
            userInfon: '',
            postSet: {
                isSet: 'true'
            },
            postPass: {
                payPassword: ''
            },
            userToken: '',
            userid: (function () {
                return localStorage.getItem('userid') ? localStorage.getItem('userid') : ''
            })(),
            data: {},
            iNow: 0,
            arrInfo: ['产品详情', '费用详情'],
            currentTabComponent: AComponent,
            comItemData: '',
            fadename: 'slide-left',
            hidemaskFlag: true,
            uthenticationStatus: localStorage.getItem('uthenticationStatus')
        }
    },
    mounted() {
        var userToken = localStorage.getItem('token')
        this.userToken = userToken
        var that = this
        if (!userToken) {
            that.$router.push('/login')
        }
        this.doAjax()
        let self = this
        this.getPayment();
        maskCallback(function () {
            self.$router.push('/center?source=2')
        }, 'comp-mask-btnAleft-travel', 'comp-mask-btnAright')
        // maskCallback(function(){
        //     self.$router.push('/')
        // }, 'comp-mask-btnAleft-suc-travel')            
    },
    computed: {
        id() {
            return this.$route.path.split('/')[2]
        }
    },
    methods: {
        direct: function (val) {
            this.$router.push({ path: '/' + val });
        },
        // 是否存在支付密码
        getPayment: async function () {
            const res = await http.post('xshk/f/exist/pay/password?token=' + this.userToken)
            // console.log(res);
            this.userInfon = res.data
        },
        // 是否将登陆密码设置为支付密码
        getPaymentset: async function () {
            if ($('#risk-use').is(":checked")) {
                const res = await http.post('xshk/f/set/pay/password?token=' + this.userToken, this.postSet)
                // console.log(res);
                if (res.data.code == 0) {
                    maskTips({ id: 'no-risk' + new Date().getTime(), txt: res.data.message })
                    this.toSubmitTour()
                    this.isBshow = 'true'
                    this.isAshow = 'false'
                }
            } else {
                maskTips({ id: 'no-risk' + new Date().getTime(), txt: '请选择是否将登陆密码作为支付密码' })
            }
        },
        // 效验支付密码
        getPassword: async function () {
            this.isBshow = 'false'
            var that = this
            var userToken = localStorage.getItem('token')
            // console.log(this.postPass);
            if (this.postPass.payPassword) {
                const res = await http.post('xshk/f/check/pay/password?token=' + this.userToken, this.postPass)
                // console.log(res);
                if (res.data.code == 0) {
                    // maskTips({ id: 'noss-risksk' + new Date().getTime(), txt: res.data.message })
                    // console.log(555);
                    var self = this
                    var userToken = localStorage.getItem('token')
                    axios({
                        url: domain + '/xshk/f/user/addTour?token=' + userToken,
                        method: 'post',
                        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                        data: Qs.stringify({
                            'tourId': self.id,
                        })
                    }).then(res => { self.handleApplySucc(res) }).catch(err => { self.handleGetDataFail(err) })

                } else {
                    maskTips({ id: 'noss-risk' + new Date().getTime(), txt: res.data.message })
                }
            } else {
                maskTips({ id: "phoneh-fail" + new Date().getTime(), txt: "请输入密码后，再提交！" });
            }
        },
        applyDo() {
            let self = this
            var userToken = localStorage.getItem("token") || '' //用户token值          
            if (!userToken) {
                console.log(userToken)
                maskTips({ id: "axios-tips-fail_" + new Date().getTime(), title: '温馨提示', btnCls: 'comp-mask-btnAleft-travel', btnTxt: '确认', btnTxt2: '取消', txt: '您尚未登录' })
            } else if (self.uthenticationStatus == 2) {
                maskTips({ id: 'no-shiming' + new Date().getTime(), txt: '您还未进行会员认证' })
                setTimeout(function () {
                    self.$router.push('/shiming')
                }, 1000)
            } else {
                self.hidemaskFlag = false
            }
        },
        handleApplySucc(res) {
            let self = this
            res = res.data
            self.hidemaskFlag = true
            console.log(res)
            if (res && res.code == 0) {
                // maskTips({id:"axios-tips-suc-travel",title:'温馨提示',btnCls: 'comp-mask-btnAleft-suc-travel',btnTxt:'确认',txt:'稍后工作人员将与您电话联系，请您保持电话畅通！'}) 
                maskTips({ id: 'axios-tips-succ_' + new Date().getTime(), txt: res.message })
                this.$router.push('/index')
            } else {
                //未登录                 
                // maskTips({id:"axios-tips-fail_"+ new Date().getTime(),title:'温馨提示',btnCls: 'comp-mask-btnAleft-travel',btnTxt:'确认',btnTxt2:'取消',txt: res.message })  
                maskTips({ id: 'axios-tips-fail_' + new Date().getTime(), txt: res.message })
                window.location.reload()
            }
        },
        changeCom(i) {
            this.iNow = i
            if (i == 0) {
                this.fadename = 'slide-left'
                this.currentTabComponent = AComponent
                this.comItemData = this.data.tourDetails
            } else {
                this.currentTabComponent = BComponent
                this.comItemData = this.data.expenseKnow
                this.fadename = 'slide-right'
            }
        },
        doAjax() {
            let self = this
            axios({
                url: domain + '/xshk/f/tour_add_view',
                method: 'post',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                data: Qs.stringify({ 'id': self.id })
            }).then(res => { self.handleGetDataSucc(res) }).catch(err => { self.handleGetDataFail(err) })
        },
        handleGetDataSucc(res) {
            res = res.data
            let self = this
            if (res && res.code == 0) {
                let data = res.data
                self.data = data
                self.comItemData = data.tourDetails
            }
        },
        handleGetDataFail(err) {
            console.log(err)
            maskTips({ id: "axios-tips-fail", txt: '网络通信失败!' })
        },
        closeMask() {
            this.hidemaskFlag = true
        },
        toSubmitTour() {
            this.hidemaskFlag = true
            var that = this
            if (that.userInfon.code == 0) {
                if (that.userInfon.data == 'notExist') {
                    this.isAshow = 'true'
                    // maskTips({ id: 'no-address' + new Date().getTime(), txt: that.userInfon.message })
                } else {
                    this.isBshow = 'true'
                }
            } else {
                maskTips({ id: 'no-address' + new Date().getTime(), txt: that.userInfon.message })
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/mixins.styl';

.com-cnt {
    width: 100%;
    height: auto;
    padding-bottom: 45px;
    overflow: hidden;

    .mask {
        position: fixed;
        box-sizing: border-box;
        left: 0px;
        top: 0px;
        right: 0px;
        bottom: 0px;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.85);
        color: rgb(232, 232, 232);
        font-family: Menlo, Consolas, monospace;
        font-size: large;
        line-height: 1.2;
        overflow: auto;
        z-index: 99;

        .tourbg {
            width: 274px;
            height: 252px;
            position: absolute;
            left: 55px;
            top: 100px;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .submitorexit {
            width: 274px;
            height: 50px;
            position: absolute;
            top: 352px;
            left: 55px;
            background: #ffffff;
            color: #C2DF5A;
            border-top: 1px solid #bbb;
            text-align: center;

            li {
                width: 137px;
                height: 48px;
                line-height: 50px;
                float: left;
                font-size: 18px;
            }

            li:first-child {
                border-right: 1px solid #bbb;
            }
        }
    }

    .hidemask {
        display: none;
    }

    .swiper-img {
        width: 100%;
        display: block;
        overflow: hidden;
        padding-bottom: 46.66666666666667%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    .title {
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
        font-size: 20px;
        font-weight: bold;
        line-height: 50px;
        height: 40px;
        ellipsis();
    }

    .price {
        width: 100%;
        height: 25px;
        padding: 0 10px;
        line-height: 25px;
        font-size: 14px;
        color: rgb(153, 153, 153);
        ellipsis();
        text-decoration: line-through;
    }

    .num1 {
        width: 100%;
        height: 20px;
        line-height: 20px;
        font-size: 16px;
        color: red;
        padding: 0 10px;
    }

    .tab-cnt {
        width: 100%;
        height: 50px;
        line-height: 30px;
        padding: 10px;
        box-sizing: border-box;
        font-size: 16px;
        color: #333;
        text-align: center;
        display: flex;
        overflow: hidden;

        .item {
            flex: 1;
            height: 100%;

            .txt {
                position: relative;
            }

            .cur {
                color: #aad114;

                &:before {
                    position: absolute;
                    left: 50%;
                    bottom: -5px;
                    content: '';
                    display: block;
                    transform: translate(-50%, 0);
                    width: 50%;
                    height: 1px;
                    background-color: #aad114;
                }
            }
        }
    }

    .btn-fix {
        width: 100%;
        height: 45px;
        line-height: 45px;
        text-align: center;
        font-size: 16px;
        color: #fff;
        background-color: #aad114;
        position: fixed;
        left: 0;
        bottom: 0;
    }
}

.com-cnt >>> .intr-com {
    font-size: 14px !important;
}

.com-cnt {
    /* Popup */
    .openup {
        max-width: 750px;

        .sss {
            position: fixed;
            overflow: auto;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 5;
            background-color: rgba(55, 55, 55, 0.6);
        }

        .tanceng {
            max-width: 750px;
            position: fixed;
            z-index: 50;
            top: 150px;
            background-image: url('../../assets/imgs/order/bgc.png');
            background-size: 100% 100%;
            width: 100%;
            height: 300px;

            .hide {
                max-width: 750px;
                height: 30px;
                width: 30px;
                position: fixed;
                top: 150px;
                right: 70px;
                z-index: 99;
            }

            div.word {
                text-align: center;

                p.top {
                    margin-top: 200px;
                    color: #fff;
                    font-size: 15px;
                }

                p.rule {
                    font-size: 20px;
                    margin-top: 40px;
                    color: #fff;

                    span {
                        padding: 10px 45px;
                    }

                    span:nth-child(2) {
                        color: #C2DF5A;
                    }
                }
            }
        }
    }

    /* Popup */
    .openups {
        max-width: 750px;
        position: fixed;
        bottom: 0;
        width: 100%;
        background-color: #efefef;

        // display: none;
        .sss {
            position: fixed;
            overflow: auto;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 5;
            background-color: rgba(55, 55, 55, 0.6);
        }

        .tanceng {
            position: relative;
            max-width: 750px;
            width: 100%;
            height: 250px;

            .hide {
                max-width: 750px;
                height: 30px;
                width: 20px;
                position: absolute;
                top: -5px;
                left: 30px;
                z-index: 99;
            }

            div.shuom {
                color: #333;
                padding-top: 15px;
                font-size: 20px;
                text-align: center;
            }

            div.word {
                text-align: center;

                p.top {
                    margin-top: 10px;
                    color: #000;

                    input {
                        font-size: 20px;
                        text-align: center;
                        border-bottom: 1px solid #333;
                        background-color: #efefef;
                    }
                }

                p.wang {
                    text-align: right;
                    padding-top: 10px;
                    padding-right: 70px;
                    font-size: 6px;
                    color: #9CC900;
                }

                p.rule {
                    margin-top: 15px;
                    color: #000;

                    span {
                        font-size: 20px;
                        padding: 10px 100px;
                        border-radius: 20px;
                        color: #fff;
                        height: 50px;
                        width: 800px;
                        background-color: #C2DF5A;
                    }
                }
            }
        }
    }
}
</style>